<template>

  <Grid :col="1" :border="false" padding="5px">
    <GridItem>
      <Button type="primary" icon="md-add"
              v-auth:menu:view:add
              @click="showMenu">添加菜单</Button>
    </GridItem>
  </Grid>

  <!-- 该组件使用菜单的添加 -->
  <Drawer :title="title"
          v-model="drawer"
          v-if="drawer"
          width="720"
          :mask-closable="false"
          @on-close="closeMenuWin"
          :styles="{
              height: 'calc(100% - 55px)',
              overflow: 'auto',
              paddingBottom: '53px',
              position: 'static'
          }">
    <MenuForm :menuRow="modifyRow" @close-win="closeMenuWin"></MenuForm>
  </Drawer>


  <Table border :columns="columns" :data="data">
    <template #name="{ row }">
      <strong>{{ row.name }}</strong>
    </template>

    <template #icon="{ row, index }">
      <Icon :type="row.icon" size="20"/>
      <strong>{{ row.icon }}</strong>
    </template>

    <template #status="{ row, index }">
      <DotTag type="success" v-if="row.status">正常</DotTag>
      <DotTag type="error" v-else>禁用</DotTag>
    </template>

    <template #action="{ row, index }">
      <Button type="primary" size="small" style="margin-right: 5px"
              icon="ios-create-outline" v-auth:menu:view:modify
              @click="showModifyWin(row)">编辑
      </Button>

      <Button type="error" size="small" icon="ios-remove-circle-outline" v-auth:menu:view:remove
              @click="remove(row.id)">移除</Button>

    </template>
  </Table>
</template>
<script>

import DotTag from "../components/DotTag.vue";
import MenuForm from '../components/MenuForm.vue'

export default {
  data() {
    return {
      drawer: false,
      title: '',
      modifyRow: null,  // 修改的一行数据，默认是空的
      columns: [
        {
          type: 'selection',
          width: 60,
        },
        {
          title: '主键',
          key: 'id',
          width: 180,
        },
        {
          title: '菜单名',
          slot: 'name',
          width: 400,
        },
        {
          title: '图标',
          slot: 'icon'
        },
        {
          title: '排序值',
          key: 'sorted',
          width: 80,
        },
        {
          title: '状态',
          slot: 'status',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          align: 'center'
        },
      ],
      data: [],
    }
  },
  created() {
    this.menuList();
  },
  methods: {
    closeMenuWin(flag) {
      if (flag) this.menuList();
      this.modifyRow = null;
      this.drawer = false;
    },
    remove(menuId) {
      this.$Modal.confirm({
        title: '提示',
        content: `您确定要删除该菜单吗?`,
        onOk: () => {
          // 负责 调用接口、完成 菜单状态的修改
          this.$api.removeMenu(menuId).then(({data: ret}) => {
            if (ret.status === "10000") {
              this.$Message.success({background: true, content: "数据删除成功"});
              // 修改数据的状态
              this.menuList() ;
            } else {
              this.$Message.error({background: true, content: ret.message});
            }
          })
        }
      })
    },
    menuList() {
      // 负责调用查询菜单接口、完成菜单的数据查询
      this.$api.queryMenuList().then(ret => {
        if (ret.data.status === "10000") {
          this.data = ret.data.data;
        }
      })
    },
    showMenu() {
      this.title = '添加菜单';
      this.drawer = true;
    },
    showModifyWin(row) {
      this.title = '修改菜单';
      this.drawer = true; // 打开修改面板
      //将数据 传给 修改面板
      this.modifyRow = row; // 将修改的数据 绑定到响应式数据中
    },
  },
  components: {
    MenuForm,
    DotTag,
  }
}
</script>


